<template>
  <div>
    <!-- crud配置 -->
    <a-card title="crud配置" style="margin: 20px 0">
      <a-empty :description="false" v-show="crudDataFilter.length === 0">
        请先设置crud
      </a-empty>
      <div class="crudAllocation">
        <a-card
          style="width: 500px; margin: 8px"
          :title="item.label"
          v-for="(item, index) in crudDataFilter"
          :key="index"
        >
          <Vuedraggable
            class="crudAllocation"
            v-model="item.checkboxData"
            animation="500"
          >
            <a-card
              hoverable
              style="width: 200px; margin: 8px"
              :title="items.label || items.value"
              v-for="(items, indexs) in item.checkboxData"
              :key="indexs"
            >
              <a-switch
                slot="extra"
                checked-children="开"
                un-checked-children="关"
                v-model="items.checkbox"
              />
              <img
                v-if="items.checkbox"
                src="../assets/collect.png"
                alt=""
                style="width: 39px; position: absolute; top: -3px; right: 0"
              />
              <a-form-model
                layout="horizontal"
                v-bind="{
                  labelCol: { span: 8 },
                  wrapperCol: { span: 14 },
                }"
              >
                <a-form-model-item label="禁用" v-if="item.mark != 4">
                  <a-checkbox v-model="items.disabled"> 禁用 </a-checkbox>
                </a-form-model-item>
              </a-form-model>
            </a-card></Vuedraggable
          >
        </a-card>
      </div>
    </a-card>
  </div>
</template>

<script>
import Vuedraggable from "vuedraggable";
export default {
  components: { Vuedraggable },
  props: {
    config: {
      type: Array,
      default: () => [],
    },
  },
  // config
  computed: {
    crudDataFilter() {
      return this.config.filter((item) => item.status);
    },
  },
};
</script>

<style lang="scss" scoped>
.crudAllocation {
  display: flex;
  flex-wrap: wrap;
}
</style>
